﻿<div class="modal fade" id="change-password-modal" tabindex="-1" role="dialog" aria-labelledby="change-password-dialog-title" aria-hidden="true">
  
    <div class="modal-dialog change-password-dialog">
    
        <div class="modal-content">
      
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="change-password-dialog-title">Change Password</h4>
            </div>
      
            <div class="modal-body">
                <div class="form-group" data-bind="css: { 'has-error': $root.userPassword.CurrentPassword.hasError }">
                    <label class="control-label" for="inputCurrentPassword">Current Password</label>
                    <input type="password" class="form-control" id="inputCurrentPassword" data-bind="value: $root.userPassword.CurrentPassword">
                    
                    <!-- ko if: $root.userPassword.CurrentPassword.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userPassword.CurrentPassword.valid }, text: $root.userPassword.CurrentPassword.errorMessage"></span>
                    <!-- /ko -->
                </div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userPassword.NewPassword.hasError }">
                    <label class="control-label" for="inputNewPassword">New Password</label>
                    <input type="password" class="form-control" id="inputNewPassword" data-bind="value: $root.userPassword.NewPassword">
                    
                    <!-- ko if: $root.userPassword.NewPassword.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userPassword.NewPassword.valid }, text: $root.userPassword.NewPassword.errorMessage"></span>
                    <!-- /ko -->
                </div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userPassword.ValidatingPassword.hasError }">
                    <label class="control-label" for="inputValidatingPassword">Re-type Password</label>
                    <input type="password" class="form-control" id="inputValidatingPassword" data-bind="value: $root.userPassword.ValidatingPassword">
                    
                    <!-- ko if: $root.userPassword.ValidatingPassword.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userPassword.ValidatingPassword.valid }, text: $root.userPassword.ValidatingPassword.errorMessage"></span>
                    <!-- /ko -->
                </div>

            </div>
      
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-bind="click: $root.userPassword.Update">Save changes</button>
            </div>
    
        </div>
  
    </div>

</div>